<template>
  <!--修改电子邮箱-->
  <div class="page">
    <el-form :model="changePhoneNum" ref="phoneNum" label-width="100px">
      <el-form-item prop="newPhoneNum" label="手机号" :rules="[
      { required: true, message: '请输入手机号', trigger: 'blur', pattern:/^1(3|4|5|7|8)\d{9}$/}
      ]">
        <el-input style="float:left" v-model="changePhoneNum.newPhoneNumX" @change="PhoneFormat" :maxlength="13"></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="修改说明" :rules="[
      { required: true, message: '请输入修复说明', trigger: 'blur' }
      ]">
        <el-input type="textarea" v-model="changePhoneNum.remark" :autosize="{ minRows:4, maxRows:6,cols:16}"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="changePhoneConfirm">确 定</el-button>
    <el-button @click="changePhoneCancle">取 消</el-button>
  </div>
</template>
<script>
  import net from '@/util/net'
  import servers from '@/config/servers'
  import { mobileFormatting } from '@/util/common'

  export default {
    name: 'modify-phone',
    data() {
      return {
        // 修改电话
        changePhoneNum: {
          newPhoneNum: '',
          newPhoneNumX: '',
          remark: ''
        }
      }
    },
    methods: {
      /**
       * 手机号格式设置(xxx-xxxx-xxxx)
       */
      PhoneFormat() {
        this.changePhoneNum.newPhoneNumX = mobileFormatting(this.changePhoneNum.newPhoneNumX.replace(/-/g, ''))
        this.changePhoneNum.newPhoneNum = this.changePhoneNum.newPhoneNumX.replace(/-/g, '')
      },
      /**
       * 获取关系，姓名（联系人信息列表）
       */
      refreshdata(changeNum) {
        this.changePhoneNum.relation = changeNum.relation
        this.changePhoneNum.name = changeNum.contactName
      },
      /**
       * 获取关系，姓名（修复信息列表）
       */
      refresh(changeNum) {
        this.changePhoneNum.relation = changeNum.relation
        this.changePhoneNum.name = changeNum.name
      },
      /**
       * 修改联系电话确定
       */
      changePhoneConfirm() {
        this.$refs['phoneNum'].validate((valid) => {
          if (!valid) {
            return false
          }
          net.send({
            server: servers.AccManage.modify_phone_email_info,
            data: {
              custId: this.$store.state.accManage.cust_id,
              relation: this.changePhoneNum.relation,
              newPhoneNum: this.changePhoneNum.newPhoneNum,
              remark: this.changePhoneNum.remark,
              name: this.changePhoneNum.name
            }
          }).then((data) => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            // 获取修改的电话号
            this.$emit('updatePhone', this.changePhoneNum.newPhoneNum)
            // 刷新修复信息列表
            this.$emit('refreshRepairInfo')
            this.$emit('refreshData')
            // 关闭dialog
            this.$emit('close')
            // 重置
            this.$refs['phoneNum'].resetFields()
            this.changePhoneNum.newPhoneNumX = ''
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        })
      },
      /**
       * 取消修改联系电话
       */
      changePhoneCancle() {
        //   关闭dialog
        this.$emit('close')
        // 重置
        this.$refs['phoneNum'].resetFields()
        this.changePhoneNum.newPhoneNumX = ''
      }
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>


</style>
